<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
 
  </style>
</head>
<body>
  <div id="app">
    <!-- 使用自定义指令的时候在标签中加上  v-指令的名称 就可以了 -->
   <input type="text" v-color="msg" name="" id="" >
   <input type="text" v-focus name="" id="">
  </div>
  <script type="text/javascript" src="./js/vue.js"></script>
  <script type="text/javascript">
    /*
      带参数的自定义局部指令
    */
    // 下面就可以不要了！因为已经有了局部指令了！
    // Vue.directive('color', {
    //   bind: function(el, binding) {
    //     el.style.backgroundColor = binding.value.color; 
    //   }
    // })
    var vm = new Vue({
      el: '#app',
      data: {
       msg: {
        color: 'blue'
       }

      },
      methods: {

      },
      directives: {
        // 里面放的是一个对象
        color: {
           bind: function(el, binding) {
            el.style.backgroundColor = binding.value.color; 
          }
         
        },
         // 如果有多个指令的话那么就在下面继续添加就行了!
          focus: {
            inserted: function(el) {
              el.focus();
            }
          }
      }
    });
  </script>
</body>
</html>
